Skip to content

refactor(views): use MMDS HeaderStandard#29709

Open
brianacnguyen wants to merge 11 commits into
mainfrom
refactor/headerstandard-titles-views
Open

refactor(views): use MMDS HeaderStandard#29709
brianacnguyen wants to merge 11 commits into
mainfrom
refactor/headerstandard-titles-views

Conversation

@brianacnguyen
Copy link
Copy Markdown
Contributor

@brianacnguyen brianacnguyen commented May 5, 2026 •
edited by cursor Bot
Loading

Description

This PR replaces HeaderCompactStandard with HeaderStandard from @metamask/design-system-react-native across many screens under app/components/Views, and updates related unit tests.

Reason: Standardize wallet UI headers on the MetaMask design system and reduce dependence on component-library/components-temp/HeaderCompactStandard.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-706

Manual testing steps

Feature: Core Views use design system HeaderStandard

  Scenario: Accounts and activity
    Given the user opens the account selector, accounts menu, or activity with back button enabled
    When they use the header back control and titles
    Then navigation matches prior behavior

  Scenario: Settings and security flows
    Given the user opens Settings and drills into General, Security, Advanced, Contacts, About, Experimental, Backup & Sync, or root Settings
    When they navigate back from each header
    Then behavior matches the previous implementation

  Scenario: Import, add wallet, and hardware
    Given the user flows through add wallet, import SRP, import private key, or hardware wallet selection
    When they dismiss or go back via the header
    Then navigation matches prior behavior

  Scenario: Networks and assets
    Given the user opens networks management, network details (including custom header actions), add token/NFT, or network picker sheet
    When they use back or close as before
    Then sheets and screens behave as expected

  Scenario: Sheets and auxiliary flows
    Given the user opens share-address QR, NFT display-media sheet, Tooltip modal, WalletConnect sessions, leaderboard notification sheets, reset password, reveal credential, or internal tools (feature flag override, AES form)
    When they close or navigate via the header
    Then behavior matches prior implementation

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Medium Risk
Broad UI refactor across many navigation entry points (screens and bottom sheets); main risk is subtle regressions in back/close behavior, insets, and header action props/testIDs.

Overview
Standardizes view headers by replacing HeaderCompactStandard (temp component-library) with MMDS HeaderStandard across a wide set of app/components/Views screens and bottom sheets (accounts, activity, add/import flows, networks, settings, security, etc.).

Updates unit tests to match the new header component API, including switching from mocked header-prop assertions to interacting with rendered header buttons via new testIDs (e.g., SimpleWebview, TooltipModal, and multiple settings/internal-tool screens).

Reviewed by Cursor Bugbot for commit abe1508. Bugbot is set up for automated code reviews on this repo. Configure here.

@brianacnguyen @cursoragent
refactor(views): use MMDS HeaderStandard
ebd5db4 
Co-authored-by: Cursor <cursoragent@cursor.com>
@brianacnguyen brianacnguyen self-assigned this May 5, 2026
@brianacnguyen brianacnguyen requested review from a team as code owners May 5, 2026 05:39
@brianacnguyen brianacnguyen added No QA Needed Apply this label when your PR does not need any QA effort. team-design-system All issues relating to design system in Mobile no changelog required No changelog entry is required for this change labels May 5, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 5, 2026

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@github-actions github-actions Bot added the size-M label May 5, 2026
cursor[bot]
cursor Bot reviewed May 5, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit ebd5db4. Configure here.

Comment thread app/components/Views/AddWallet/AddWallet.tsx
Comment thread app/components/Views/NetworksManagement/NetworkDetailsView/NetworkDetailsView.tsx
brianacnguyen added 10 commits May 5, 2026 09:16
@brianacnguyen
Merge branch 'main' into refactor/headerstandard-titles-views
fa1657b
@brianacnguyen
Prettified files
60eeb4f
@brianacnguyen
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
d67f451 
…to refactor/headerstandard-titles-views
@brianacnguyen
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
a764f9d 
…to refactor/headerstandard-titles-views
@brianacnguyen
Added testid to reset password header
615b4c7
@brianacnguyen
Merge branch 'main' into refactor/headerstandard-titles-views
4aa0e09
@brianacnguyen
Added testid to security settings header
ba24eb4
@brianacnguyen
Merge branch 'refactor/headerstandard-titles-views' of https://github…
be6d094 
….com/MetaMask/metamask-mobile into refactor/headerstandard-titles-views
@brianacnguyen
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
59741b0 
…to refactor/headerstandard-titles-views
@brianacnguyen
Merge branch 'main' into refactor/headerstandard-titles-views
abe1508
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeIdentity, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeConfirmations, SmokeBrowser, SmokePerps, SmokePredictions, SmokeMultiChainAPI
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 82%
click to see 🤖 AI reasoning details

E2E Test Selection:
This PR migrates HeaderCompactStandard (internal temp component) to HeaderStandard (from @metamask/design-system-react-native) across 38 files. The change is purely a UI component swap with no business logic changes.

Why medium risk:

  • The component swap touches navigation headers across virtually every major screen in the app
  • If HeaderStandard has any behavioral differences (back button behavior, layout, prop handling, testID support), it could break navigation flows across many E2E tests
  • The wide surface area means a single regression in the new component would cascade across many flows
  • Some files add new testID props which could affect test selectors

Affected screens and corresponding tags:

  • SmokeAccounts: AccountSelector, AccountsMenu, RevealPrivateCredential (SRP reveal), ImportPrivateKey, ImportNewSecretRecoveryPhrase, ConnectHardware/SelectHardware - all use the header for navigation
  • SmokeWalletPlatform: ActivityView (transaction history), AddWallet (multi-SRP), AccountsMenu
  • SmokeIdentity: BackupAndSyncSettings (sync settings screen header)
  • SmokeNetworkAbstractions: NetworksManagementView, NetworkDetailsView, AddAsset, NetworkListBottomSheet - network management screens
  • SmokeNetworkExpansion: ShareAddressQR (multichain accounts sheet)
  • SmokeMultiChainAPI: Related to multichain account/network management screens
  • SmokeConfirmations: SecuritySettings (Blockaid settings), general settings navigation
  • SmokeBrowser: SimpleWebview (webview with header navigation and share button)
  • SmokePerps/SmokePredictions: SocialLeaderboard TraderNotificationsBottomSheet, TopTradersNotificationsSetupBottomSheet

Tags NOT selected:

  • SmokeSwap, SmokeStake, SmokeMoney, SmokeSeedlessOnboarding, SmokeSnaps: These flows don't directly use screens that were modified in this PR

Performance tests: Not selected - this is a component import migration with no performance-sensitive changes (no list rendering, no data loading, no state management changes).

Performance Test Selection:
This PR only migrates a header UI component from an internal temp component to the design system component. There are no changes to data loading, list rendering, state management, animations, or app initialization that would impact performance metrics. The HeaderStandard component swap is a pure UI/import change.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 6, 2026

Quality Gate Passed Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@brianacnguyen brianacnguyen

Labels

no changelog required No changelog entry is required for this change No QA Needed Apply this label when your PR does not need any QA effort. size-M team-design-system All issues relating to design system in Mobile

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@brianacnguyen